<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/top">top</router-link>
    <router-link to="/left">left</router-link>
    <router-link to="/right">right</router-link>
    <hr/>
    <router-view></router-view>
    <hr/>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    // 定义三个局部组件
    let top1 = {
        template: `
            <div>
                我是top1
            </div>
        `
    }
    let left = {
        template: `
            <div>
                我是left
            </div>
        `
    }
    let right = {
        template: `
            <div>
                我是right
            </div>
        `
    }
    // 书写路由
    let router = new VueRouter({
        routes: [
            {
                path: '/top',
                component: top1
            },
            {
                path: '/left',
                component: left
            },
            {
                path: '/right',
                component: right
            }
        ]
    })
    new Vue({
        el: '#app',
        data() {
            return {}
        },
        components: {
            top1, left, right
        },
        router: router
    })
</script>